<template>
  <div>
    <div class="second">
      <el-form :inline="true" :border="true" class="demo-form-inline">
        <el-form-item label="类品名称">
          <el-input
            v-model="Category"
            placeholder="请输入类品名称进行查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="Category"
            placeholder="请输入用户邮箱进行查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary " @click="select()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="insertBtn()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :border="true" row-key="id" :data="tableData" style="width: 100%">
      <el-table-column label="编号" prop="id"> </el-table-column>
      <el-table-column label="父类编号" prop="parentId"> </el-table-column>
      <el-table-column label="类品名" prop="name"> </el-table-column>
      <el-table-column label="是否上架" prop="isShow"> </el-table-column>

      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="更新时间" prop="updateTime"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
          >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-left: 70%">
      <el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>

<!--    新增弹窗-->
    <el-dialog
      title="新增商品类别"
      :visible.sync="dialogFormVisible"
      width="40%"
      height="40%"
    >
      <el-form :model="form">
        <el-form-item label="父类id" :label-width="formLabelWidth">
          <el-input
            v-model="form.parentId"
            autocomplete="off"
            width="150px"
          ></el-input>
        </el-form-item>

        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            width="150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否上架" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.isShow" label="0">上架</el-radio>
            <el-radio v-model="form.isShow" label="1">未上架</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">

          <el-input
            placeholder="创建时间"
            suffix-icon="el-icon-date"
            type="date"
            v-model="form.createTime">
          </el-input>
        </el-form-item>
        <el-form-item label="修改时间" :label-width="formLabelWidth">

          <el-input
            placeholder="修改时间"
            suffix-icon="el-icon-date"
            type="date"
            v-model="form.updateTime">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">确 定</el-button>
      </div>
    </el-dialog>


<!--    修改页面-->
    <el-dialog
      title="修改商品类别"
      :visible.sync="editFormVisible"
      width="40%"
      height="40%"
    >
      <el-form :model="editForm">
        <el-form-item label="父类id" :label-width="editFormLabelWidth">
          <el-input
            v-model="editForm.parentId"
            autocomplete="off"
            width="150px"
          ></el-input>
        </el-form-item>

        <el-form-item  label="类别名称" :label-width="editFormLabelWidth">
          <el-input
            v-model="editForm.name"
            autocomplete="off"
            width="150px"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否上架" :label-width="editFormLabelWidth">
          <template>
            <el-radio v-model="editForm.isShow" label="0">上架</el-radio>
            <el-radio v-model="editForm.isShow"  label="1">未上架</el-radio>
          </template>
        </el-form-item>
<!--        <el-form-item label="是否上架" prop="isShow" v-model="editForm.isShow">-->
<!--          <el-switch v-model="editForm.isShow"></el-switch>-->
<!--        </el-form-item>-->
        <el-form-item label="创建时间" :label-width="editFormLabelWidth">

          <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="创建时间" v-model="editForm.createTime" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item label="修改时间" :label-width="editFormLabelWidth">
          <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="修改时间" v-model="editForm.updateTime" style="width: 100%;"></el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询
      tableData: [],

      //新增
      dialogFormVisible: false,
      formLabelWidth: "80px",
      form: {
        id: "",
        parentId:"",
        name:"",
        isShow:1,
        createTime:"",
        updateTime:""
      },
      //修改页面
      editFormVisible: false,
      editFormLabelWidth: "80px",
      editForm:{
        id: "",
        parentId:"",
        name:"",
        isShow:1,
        createTime:"",
        updateTime:""
      },
      Category: "",
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 10, //每页显示的记录数
        total: 0, //总记录数
        email: "",
        username: "",
        description: "",
      },
    };
  },
  methods: {
    //修改
    handleEdit(index, row) {
      this.editForm.id=index
      this.$http.get("http://localhost:8989/Category/getById?id="+index).then((res) =>{
        this.editForm = res.data
        this.editFormVisible=true;
        console.log('------------------',res.data)

      });
    },
    edit(){
      this.$http.post("http://localhost:8989/Category/update",this.editForm).then((res) =>{
        console.log('11111111111111111111111111',this.editForm)
        this.editFormVisible = false
        this.$http.get("http://localhost:8989/Category").then((res) => {
          this.tableData = res.data.data;
        });

      });
    },

    handleDelete: function (index, row) {
      this.$http.get("http://localhost:8989/Category/delete?id="+index).then((res) =>{
        this.$http.get("http://localhost:8989/Category").then((res) => {
          this.tableData = res.data.data;
        });
      });
      console.log(index);
    },
    handleCurrentChange() {},
    //模糊查询
    select() {
      console.log("--------------------------------");
      this.$http
        .get("http://localhost:8989/users/getUserNameOrEmail", this.form)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData);
        });
    },
    //全查
    getAll() {
      this.$http.get("http://localhost:8989/Category").then((res) => {
        this.tableData = res.data.data;
      });
    },
    //新增
    insertBtn() {
      this.dialogFormVisible = true

    },
    insert(){
      this.$http.post("http://localhost:8989/Category/insert",this.form).then((res) =>{
        this.dialogFormVisible = false
      });
    },
  },
  //钩子函数
  created() {
    this.getAll();
  },
};
</script>

<style scoped>
.second {
  margin-left: 50px;
  margin-top: 20px;
}

hr {
}
</style>
